<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>人员管理</title>
    <meta charset="utf-8">
    <%@ include file="/WEB-INF/pages/common/common.jsp" %>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/md5.js"></script>
    <style type="text/css">
        label{
            display:inline-block;
            width:60px;
            text-align: right;
            margin-top: 5px;
            margin-right: 10px;
            margin-left: 10px;
        }
        input{
            width:200px;
            margin-top: 5px;
        }
        li {
            list-style: none;
            font-size: 14px;
            margin: 2px;
        }
        .search_content {
            width: 300px;
            float: left;
            margin: 10px;
        }
        .check_role{
            margin: 10px 0px 0px;
            cursor: pointer;
            width: 16px;
            height: 16px;
            position: relative;
            display: inline-block;
            text-align:center;
        }
        .check_label{
            margin: 0px 20px 0px 0px;
            height: 18px;
            line-height: 18px;
            text-align:center;
            width: auto;
            display:inline;
            font-size: 18px;
        }

    </style>
</head>
<body>
    <div>
        <div class="search_content" >
            <label>ID:</label>
            <input  id="reqId" name="reqId" type="text" class="easyui-textbox">
        </div>
        <div class="search_content">
            <label>登陆名:</label>
            <input  id="reqName" name="reqName" type="text" class="easyui-textbox">
        </div>
        <div class="search_content">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-search" onclick="showResult()" style="width:90px">搜索</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="dataTools" style="display: none;">
        <a id="add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="javascript:showAddDialog();">新增</a>
        <a id="save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:showSaveDialog();">修改</a>
        <a id="remove" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="javascript:remove();">删除</a>
        <a id="assignRole" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:assignRole();">分配角色</a>
    </div>
    <div id="data"></div>
    <div id="dialog_add" class="easyui-dialog" data-options="buttons:'#dialog_tool',modal:true" closed="true" style="height: 300px;width: 500px;display: none;">
        <form id="saveData" method="post">
            <input type="hidden" id="id" name="id"/>
            <div>
                <label>登陆名：</label>
                <input id="loginName" type="text" class="easyui-textbox" name="loginName" maxlength="255" required="true"/>
            </div>
            <div id="password_div">
                <label>密码：</label>
                <input id="loginPassword" type="password" name="loginPassword" class="easyui-textbox" maxlength="255" required="true"/>
            </div>
            <div>
                <label>状态：</label>
                <select id="state" name="state" class="easyui-combobox" data-options="editable:false,panelHeight:'auto'">
                    <option value="0">有效</option>
                    <option value="1">无效</option>
                </select>
            </div>
            <div id="dialog_tool">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveData()" style="width:90px">保 存</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dialog_add').dialog('close')" style="width:90px">取 消</a>
            </div>
        </form>
    </div>

    <div id="dialog_add_assignRole" class="easyui-dialog" data-options="buttons:'#dialog_tool_assignRole',modal:true" closed="true" style="height: 400px;width: 800px;display: none;">
        <form id="assignRole_form" method="post">
            <div id="check_data">
            </div>
            <div id="dialog_tool_assignRole">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="savePersonRole()" style="width:90px">保 存</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dialog_add_assignRole').dialog('close')" style="width:90px">取 消</a>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript">

    window.onload=function(){
        var params={}
        initData(params);
    }

    function initData(params) {
        $.ajax({
            type: "GET",
            async: false,
            cache: false,
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            url: "${pageContext.request.contextPath}/admin/person/search",
            data: params,
            success: function(resp){
                if(resp.code!=0){
                    $.messager.alert('Warning','执行出错了,state:'+resp.msg);
                    return;
                }
                $("#data").datagrid({
                    data: resp.data,
                    idField:'id',
                    queryParams:params,
                    striped:true,
                    fitColumns:true,
                    singleSelect:true,
                    rownumbers:true,
                    pagination:true,
                    pagePosition:'bottom',
                    pageNumber:1,
                    pageSize:20,
                    nowrap:true,
                    loadMsg:'数据加载中...',
                    showFooter:true,
                    pageList:[5,10,20,50],
                    columns:[[
                        {field:'id', title:'主键', width:80,align:'center', sortable:true},
                        {field:'loginName', title:'登陆名', width:80,align:'center'},
                        {field:'state', title:'状态', width:80,align:'center', formatter: function(value,row,index){ return getRecordState(value)}},
                        {field:'createTime', title:'创建时间', width:100,align:'center',formatter: function(value,row,index){return timeStamp2String(value);} },
                        {field:'editTime', title:'修改时间', width:100,align:'center',formatter: function(value,row,index){return timeStamp2String(value);}},
                    ]],
                    toolbar: '#dataTools'
                }).datagrid("getPager").pagination({
                    total: resp.totalRecord
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $.messager.alert('Warning','执行出错了,state:'+textStatus);
            }
        });
    }

    function showAddDialog() {
        $("#dialog_add").window({
            top:$(window).height() * 0.1,
            left:$(window).width() * 0.2
        });
        $("#dialog_add").dialog('open').dialog('setTitle', '保存人员');
        $('#saveData').form('clear');
        $("#password_div").show();
    }

    function showSaveDialog() {
        var row = $('#data').datagrid('getSelected');
        if(row){
            $("#dialog_add").dialog('open').dialog('setTitle', '编辑人员');
            $('#saveData').form('load', row);
            $("#password_div").hide();
        }else{
            $.messager.alert('校验失败','请选择一条记录','info');
        }
    }

    function showResult(){
        var params={
            id:$('[name="reqId"]').val(),
            loginName:$('[name="reqName"]').val()
        }
        initData(params);
    }

    function saveData() {
        $('#saveData').form('submit', {
            url:'${pageContext.request.contextPath}/admin/person/save',
            onSubmit: function(){
                var loginName = $("input[name='loginName']").val();
                if(loginName==null || loginName==""){
                    $.messager.alert('校验失败','登陆名不能为空','info');
                    return false;
                }
                var id = $("#id").val();
                if(id==null || id==undefined || id==""){
                    var loginPassword = $("input[name='loginPassword']").val();
                    if(loginPassword==null || loginPassword==""){
                        $.messager.alert('校验失败','密码不能为空','info');
                        return false;
                    }
                    $("input[name='loginPassword']").val(md5(loginPassword))
                }else{
                    $("input[name='loginPassword']").val("");
                }
                return true;
            },
            success:function(data){
                var respData = JSON.parse(data);
                if(respData.code==0){
                    $('#dialog_add').dialog('close');
                    var params={
                        id:$('[name="reqId"]').val(),
                        loginName:$('[name="reqName"]').val()
                    }
                    initData(params);
                }else{
                    $.messager.alert('保存失败',respData.msg,'info');
                }
            }
        });
    }

    function remove() {

        var row = $('#data').datagrid('getSelected');
        if(row){
            $.messager.confirm('确认操作', '确认删除这条记录吗？', function(r){
                if (r){
                    var url = '${pageContext.request.contextPath}/admin/person/del';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: { id: row.id},
                        success: function(data){
                            if(data.code==0){
                                var params={
                                    id:$('[name="reqId"]').val(),
                                    loginName:$('[name="reqName"]').val()
                                }
                                initData(params);
                            }else{
                                $.messager.alert('删除失败',data.msg,'info');
                                $('#dataList').datagrid('reload');
                            }
                        }
                    });
                }
            });
        }else{
            $.messager.alert('未选数据','请选择一条记录','info');
        }
    }

    function assignRole() {
        var row = $('#data').datagrid('getSelected');
        if(row){
            $("#check_data").empty();
            var params={
                id:row.id,
            }
            $("#dialog_add_assignRole").dialog('open').dialog('setTitle', '分配角色');
            $.ajax({
                type: "GET",
                async: false,
                cache: false,
                dataType: "json",
                data: params,
                contentType: "application/x-www-form-urlencoded",
                url: "${pageContext.request.contextPath}/admin/role/queryAllRole",
                success: function(resp){
                    if(resp.code==0){
                        for(var i=0;i<resp.data.length;i++){
                            var role = resp.data[i]
                            var checked = role.use?' checked ':''
                            $("#check_data").append('<input type="checkbox" name="roleId" '+checked+' class="check_role" id="id_'+i+'" value="'+role.id+'"><label class="check_label" for="id_'+i+'">'+role.name+'</label>');
                        }
                    }else{
                        $.messager.alert('Warning','执行出错了,state:'+resp.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(errorThrown)
                    $.messager.alert('Warning','执行出错了,state:'+textStatus);
                }
            });
        }else{
            $.messager.alert('未选数据','请选择一条记录','info');
        }
    }

    function savePersonRole() {
        var row = $('#data').datagrid('getSelected');
        if(row){
            var param = {
                id:row.id
            }
            var roleIds = []
            $("input[name='roleId']:checked").each(function (i) {
                roleIds[i] = $(this).val();
            })
            param.role = roleIds;
            $.ajax({
                type: "POST",
                async: false,
                cache: false,
                dataType: "json",
                data: JSON.stringify(param),
                contentType: "application/json; charset=utf-8",
                url: "${pageContext.request.contextPath}/admin/person/assignRole",
                success: function(resp){
                    if(resp.code==0){
                        $.messager.show({
                            title:'消息提示',
                            msg:'操作成功！',
                            timeout:3000,
                            showType:'slide',
                            width:200,
                            height:100
                        });
                        $('#dialog_add_assignRole').dialog('close')
                    }else{
                        $.messager.alert('Warning','执行出错了,state:'+resp.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(errorThrown)
                    $.messager.alert('Warning','执行出错了,state:'+textStatus);
                }
            });
        }else{
            $.messager.alert('未选数据','请选择一条记录','info');
        }

    }
</script>
</html>
